<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;background-color: pink;
            margin: 100px auto;
        }
        div:hover {
            /* 1:里面的数值不跟单位  就是倍数的意思 1就是1倍 2就是2倍 */
            /* transform: scale(x,y); */
            /* transform: scale(2,2); */
            /* :2修改了宽度为原来的2倍， 高度不变 */
            /* transform: scale(2,1); */
            /* 3:等比例缩放 同时修改宽度和高度，我们有简单的写法 以下是 宽度修改了2倍，高度默认和第一个参数一样 */
            /* transform:scale(2) ; */
            /* 4:我们可以进行缩小 小于1 就是缩放 */
            /* transform: scale(0.5,0.5); */
            /* transform: scale(0.5); */
            /* 5：scale的最大优势之处 不会影响其他的盒子 而且可以设置缩放的中心点 */
            /* （说人话就是 放大缩小都不会影响布局 非常好用） */
            /* 6：如果直接给宽高 在进行：hover时会影响其他内容及布局 看下面的123 */
             /* width: 300px;
            height: 300px;  */
            /* 总结：如遇到需要内容缩放又不能影响其他内容 使用scale 想必是极好的  */
            transform: scale(2);
        }
    </style>
</head>
<body>
    <div>

    </div>
    123
</body>
</html>